<template>
  <div class="pages personDetail">
    <div class="pageLevel">
      <div class="form-content">
        <!-- 操作框 -->
        <div class="operationBox tableSearch">
          <el-button type="primary" @click="goBack()" size="mini">返回</el-button>
          <el-button type="primary" v-if="showTab == '2' || showTab == '3'" @click="submitForm('ruleForm')" size="mini">保存</el-button>
          <el-button type="primary" v-if="showTab == '1' && setRole('修改')" @click="edit()" size="mini">修改</el-button>
        </div>
        <!-- 表单内容 -->
        <el-form :label-position="ruleForm.labelPosition" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm" size="small">
          <div>
            <el-row>
              <el-form-item label="">
                <el-checkbox :disabled="ting" v-model="ruleForm.status" label="启用"></el-checkbox>
              </el-form-item>
            </el-row>
            <div class="rowtwo">
              <el-row class="rowtwo-form">
                <el-form-item label="编号：">
                  <el-input :disabled="true" v-model="ruleForm.code" placeholder="自动编码"></el-input>
                </el-form-item>
                <el-form-item label="姓名：" prop="name">
                  <el-input :disabled="ting" v-model="ruleForm.name" placeholder="请输入姓名"></el-input>
                </el-form-item>
                <el-form-item label="手机号：" prop="phone">
                  <el-input :disabled="ting" v-model="ruleForm.phone" placeholder="请输入手机号" maxlength="11"></el-input>
                </el-form-item>
                <el-form-item label="分类：" prop="type">
                  <el-select :disabled="ting" v-model="ruleForm.type" placeholder="请选择" style='width: 100%;'>
                    <el-option v-for="item in typeArray" :key="item.typeId" :value="item.typeId" :label="item.name"></el-option>
                  </el-select>
                </el-form-item>
<!--                <el-form-item label="所属组织：" prop="orgName">-->
<!--                  <el-input :disabled="ting" placeholder="请选择组织机构" size="small" v-model="ruleForm.orgName" class="input-with-select">-->
<!--                    <el-button :disabled="ting" type="primary" @click="dialogTableVisible_o=true" slot="append">选择</el-button>-->
<!--                  </el-input>-->
<!--                </el-form-item>-->
                <el-form-item label="行业经验：" prop="experience">
                  <el-input :disabled="ting" v-model="ruleForm.experience" maxlength='15'></el-input>
                </el-form-item>
              </el-row>
              <el-row class="rowtwo-img">
                <el-form-item prop="headUrl" label='头像：'>
                  <div :class="['imgbox',{'imgbox-v':!ruleForm.headUrl}]">
                    <img :src="ruleForm.headUrl" @click="showimg(ruleForm.headUrl)" alt="">
                  </div>
                  <el-upload v-if='!ting' class="upload-demo" action="1" :show-file-list="false" :before-upload="beforeAvatarUpload" :http-request="uploadSectionFile2">
                    <el-button :disabled="ting" class="upload-btn" size="small" type="primary">上传图片</el-button>
                  </el-upload>
                </el-form-item>
              </el-row>
            </div>
            <el-row style='width: 600px'>
              <el-form-item label="技师介绍：" prop="remark">
                <el-input :disabled="ting" class="textContent" type="textarea" v-model="ruleForm.remark" maxlength="200" placeholder="200字以内"></el-input>
              </el-form-item>
            </el-row>
          </div>
        </el-form>
      </div>
      <!-- 组织选择弹出框 -->
      <el-dialog title="组织选择" class="addshopname" :visible.sync="dialogTableVisible_o" :closeOnClickModal='false' :closeOnPressEscape='false' width="60%">
        <i class="el-icon-close icon" @click="dialogTableVisible_o=false"></i>
        <div class="operationBox tableSearch">
          <el-button size="mini" type="primary" @click="save_o">选择</el-button>
          <el-button size="mini" @click="dialogTableVisible_o=false">取消</el-button>
        </div>
        <el-table :data="tableData_o" highlight-current-row border ref="multipleTable" tooltip-effect="dark" style="width: 100%" @current-change="changeFun_o">
          <!-- <el-table-column type="selection" width="55"></el-table-column> -->
          <el-table-column type="index" width="50"></el-table-column>
          <el-table-column prop="comapnyCode" label="编号" align="center"></el-table-column>
          <el-table-column prop="name" label="组织机构名称" align="center"></el-table-column>
          <el-table-column prop="parentCompany" label="上级组织机构" align="center"></el-table-column>
          <el-table-column prop="codeName" label="组织机构类型" align="center"></el-table-column>
          <el-table-column prop="address" label="组织机构地址" align="center"></el-table-column>
        </el-table>
        <div class="pageblock item">
          <!-- @click="toPage_o" -->
          <el-button size="mini" type="primary" class="Determine topage">确定</el-button>
          <el-pagination @size-change="handleSizeChange_o" @current-change="handleCurrentChange_o" :current-page="currentPage_o" :page-sizes="[20,30]" :page-size="pageSize_o" layout="total, sizes, prev, pager, next, jumper" :total="totalItems_o">
          </el-pagination>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import util from '@/util';
import {
  findEmployeeTypeList,
  saveOrUpdateEmployee,
  selectBaseShopByUser,
  getEmployeeDetail,
  uploadFile,
  getFile
} from "@/api";
export default {
  computed: mapState(["merchantId", "path","power"]),
  components: {},
  data() {
    const checkMobile = (rule, value, callback) => {
      if (!util.validMobilePhone(value)) {
        return callback(new Error('手机号格式不正确 '));
      } else {
        callback();
      }
    };
    return {
      ting: false,
      orgids: "",
      orgArray: [],
      pageSize_o: 20,
      currentPage_o: 1,
      totalItems_o: 0,
      tableData_o: [],
      selectArr_o: [],
      multipleTable: "",
      dialogTableVisible_o: false,
      showTab: "",
      ruleForm: {
        labelPosition: "left",
        status: true,
        headUrl: "",
        code: "",
        name: "",
        phone: "",
        type: "",
        orgName: "",
        experience: "",
        remark: "",
        id: "",
        dialogImageUrl: ""
      },
      typeArray: [],
      zuzhiArray: [],
      rules: {
        code: [
          { required: true, message: "请输入编号", trigger: "blur" },
          { max: 30, message: "最多15字", trigger: "blur" }
        ],
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        phone: [{ required: true, message: '请输入手机号', trigger: 'blur' },
                { validator: checkMobile, trigger: 'blur'}],
        typeId: [
          {
            // type: 'array',
            required: true,
            message: "请至少选择一个分类",
            trigger: "change"
          }
        ],
        experience: [
          { required: true, message: "请输入行业经验", trigger: "blur" },
          { max: 30, message: "最多15字", trigger: "blur" }
        ],
      },
      arr: []
    };
  },
  created() {
    this.showTab = util.getQuery('showTab');
    let arr = this.path;
    arr.pop(this.showTab);
    // 点击新增进来的
    if (this.showTab == "2") {
      arr.push({
        label: "新增员工"
      });
      this.order();
      //this.tableget_org();
    }
    // 点击修改过来的
    if (this.showTab == "3") {
      arr.push({
        label: "修改人员信息"
      });
      this.ruleForm.id = util.getQuery('id');
      this.order();
      this.getData();
      //this.tableget_org();
    }
    // 点击查看过来的
    if (this.showTab == "1") {
      arr.push({
        label: "员工管理"
      });
      this.ruleForm.id = util.getQuery('id');
      this.ting = true;
      this.getData();
      this.order();
    }
    //this.$store.commit("SETPATH", arr);
  },
  methods: {
    //配置权限
    setRole (key) {
      return util.selectTitle(this.power[0].children, key)
    },
    // 获取下拉列表信息
    order() {
      findEmployeeTypeList().then(res => {
        this.typeArray = res.data.list;
      });
    },
    goBack() {
      history.back();
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let postdata = new FormData();
          if (this.ruleForm.id != "") {
            // if (
            //   this.multipleTable.id != this.orgids &&
            //   this.multipleTable.id != "" &&
            //   this.multipleTable.id != null &&
            //   this.multipleTable.id != undefined
            // ) {
            //   postdata.append("orgId", this.multipleTable.id);
            // } else {
            //   postdata.append("orgId", this.orgids);
            // }
            postdata.append("id", this.ruleForm.id);
            postdata.append("status", this.ruleForm.status);
            postdata.append("name", this.ruleForm.name);
            postdata.append("code", this.ruleForm.code);
            postdata.append("phone", this.ruleForm.phone);
            postdata.append("typeId", this.ruleForm.type);
            postdata.append("experience", this.ruleForm.experience);
            postdata.append("remark", this.ruleForm.remark);
            postdata.append("headUrl", this.ruleForm.headUrl);
            // postdata.append("orgId", this.merchantId);
          } else {
            postdata.append("status", this.ruleForm.status);
            postdata.append("name", this.ruleForm.name);
            postdata.append("code", this.ruleForm.code);
            postdata.append("phone", this.ruleForm.phone);
            postdata.append("typeId", this.ruleForm.type);
            postdata.append("orgId", this.merchantId);
            postdata.append("experience", this.ruleForm.experience);
            postdata.append("remark", this.ruleForm.remark);
            postdata.append("headUrl", this.ruleForm.headUrl);
          }
          saveOrUpdateEmployee(postdata).then(res => {
            if(res.code == 200){
              this.$message({
                showClose: true,
                message: '新建成功',
                type: "success"
              });
              this.$store.commit("SET_ISRELOADDATA", true);
              history.back(-1);
              return false;
            }
          });
        } else {
          this.$message({
            showClose: true,
            message: "请检查必填信息",
            type: "error"
          });
          return false;
        }
      });
    },
    edit() {
      this.showTab = "3";
      this.ting = false;
    },
    // 上传图片之前验证图片格式
    beforeAvatarUpload(file) {
      const isJPG =
        file.type === "image/png" ||
        file.type === "image/jpg" ||
        file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 1;
      if (!isJPG) {
        this.$message.error("上传图片格式错误!");
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 1MB!");
      }
      return isJPG && isLt2M;
    },
    //上传图片
    uploadSectionFile2(param) {
      var fileObj = param.file;
      var data = new FormData();
      data.append("file", fileObj);
      data.append("projectName", fileObj.name);
      uploadFile(data).then(res => {
        this.ruleForm.headUrl = `${getFile}?id=${res.data.id}`;
      });
    },
    showimg(a) {
      if(!a){
        return;
      }
      window.open(a);
    },
    // 查看详情
    getData() {
      let data = {
        id: this.ruleForm.id
      };
      getEmployeeDetail(data).then(res => {
        this.ruleForm = res.data;
        this.orgids = this.ruleForm.orgId;
      });
    },
    // 所属组织
    tableget_org(pageSize, pageNum) {
      let postdata = {
        pageNum: this.currentPage_o,
        pageSize: this.pageSize_o,
        type: 4, //1.企业客户  2.供应商  3.门店 4.客户和门店
        businessId: this.merchantId
      };
      selectBaseShopByUser(postdata).then(res => {
        this.totalItems_o = res.data.pageTotal;
        this.tableData_o = res.data.list;
      });
    },
    handleSizeChange_o(val) {
      this.pageSize_o = val;

      //this.tableget_org(val, this.currentPage_o);
    },
    handleCurrentChange_o(val) {
      this.currentPage_o = val;
      //this.tableget_org(this.pageSize_o, val);
    },
    toPage_o(val) {
      this.currentPage_o = val;
      //this.tableget_org(this.pageSize_o, val);
    },
    changeFun_o(val) {
      this.multipleTable = val;
    },
    save_o() {
      this.ruleForm.orgName = this.multipleTable.name;
      this.dialogTableVisible_o = false;
    }
  }
};
</script>
<style scoped>
.form-content {
  padding-left: 30px;
  /*margin: auto;*/
}
.rowtwo .rowtwo-form{
  width: 450px;
}
.imgbox {
  display: inline-block;
  border: 1px dashed #dcdfe6;
}
.imgbox-v{
  width: 200px;
  height: 200px;
}
.imgbox img {
  display: block;
  width: auto;
  height: 200px;
}
.upload-btn {
  width: 100%;
  margin: 10px 0;
}
</style>
<style>
/*.item .el*/
.addshopname .item .el-input {
  width: 60px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.textContent .el-textarea__inner {
  height: 200px;
}
</style>

